<template>
  <view class="orderPage pb-2 d-flex flex-column" style="background-color: #e8e8e8">
    <StatusBar></StatusBar>
    <HeaderComponent title="我的订单"></HeaderComponent>
    <input v-model="searchValue" @input="onSearch">
    <!--    isRefreshing==true 下拉状态, false 关闭下拉;  @scrolltoupper :refresher-triggered="isRefreshing" -->
    <scroll-view scroll-y refresher-enabled scroll-with-animation :refresher-threshold=50
                 @refresherrefresh="init(true)" @scrolltolower="init(false)"
                 class="flex-grow-1 overflow-scroll">
      <view class="d-flex flex-column">
        <view v-for="(item,index) in list" :key="index" class="card mt-2 mx-2">
          <view class="px-3 py-1 d-flex">
            <view class="col-4">订单编号: {{ index }}</view>
            <view class="ms-auto">{{ item.create_time }}</view>
          </view>
          <view v-for="(item1,index2) in item.info_list" :key=index2
                class="m-2 d-flex justify-content-between align-items-center border-bottom">
            <view class="col-6 d-flex align-items-center">
              <view class="ratio ratio-1x1" style="width: 3rem">
                <image :src="item1.image" class="rounded-circle"/>
              </view>
              <view class="ms-1">{{ item1.name }}</view>
            </view>
            <view class="col-3">{{ item1.num }}</view>
            <view class="col-3">￥{{ item1.price }}</view>
          </view>
          <view class="px-3 py-1 d-flex align-items-center">
            <view class="p-1 ms-auto rounded rounded-2 bg-success text-white small">已支付</view>
            <view class="ms-1 fw-bold">总价格: {{ item.total_price }}</view>
          </view>
        </view>
      </view>
      <view v-if="page.loading">加载中</view>
      <view v-else>
        <view v-if="list.length===0">没有订单</view>
        <view v-else-if="page.data.length!==page.page_size"> 没有更多了 </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {orderPage} from "@/api/api";
import {getJson} from "@/api/http";
import StatusBar from "@/pages/component/StatusBar.vue";
import HeaderComponent from "@/pages/component/HeaderComponent.vue";

export default {
  name: "MyOrder",
  components: {
    HeaderComponent,
    StatusBar,
  },
  data() {
    return {
      searchValue: '',
      list: [], // 存储列表数据
      page: {page: 0, page_size: 10, data: [], loading: false,},
    }
  },
  methods: {
    async init(isReload) {
      if (isReload) {
        this.page.page = 0;
        this.page.data = [];
        this.page.loading = false;
      }
      if (this.page.loading) return;
      let params = {
        current: this.page.current + 1,
        pageSize: this.page.pageSize,
        search: this.search,
      }
      this.page.loading = true;
      let res = await getJson(orderPage, params);
      if (res.code === 1) {
        let page = res.data
        if (page?.data?.length > 0) {
          this.page = page;
          this.list = this.list.concat(page.data)
        }
      } else {
        uni.showToast({
          title: '服务器异常, 请稍后重试',
          icon: 'none'
        })
      }
      this.page.loading = false;
    },
    onSearch(){
      this.init(true);
    },
    async onRefresherRefresh() {
      console.log("refresherRefresh");
    },
    async onScrollToLower() {
      console.log("onScrollToLower");
    }
  },
  onBackPress() {
  },
  created() {
    this.init(this.page)
  }
}
</script>

<style scoped lang="less">
.orderPage {
  height: calc(100vh);
  /*#ifdef H5 */
  height: calc(100vh - var(--window-top) - 100rpx);
  /* #endif */
  // display: flex;
  // flex-direction: column;
  //background-color: pink;
}
</style>
